<template>
  <div class="main-content">
    <div class="screen-frame clearfix">
      <div class="col-md-6 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label for=""
                   class="col-md-3 col-sm-2 control-label">楼盘：</label>
            <div class="col-md-8 col-sm-10">
              <el-select class=""
                         v-model="params.premisesId"
                         filterable
                         placeholder="请选择"
                         :clearable="true"
                         style="width:100%">
                <el-option v-for="item in premisesList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label for=""
                   class="col-md-3 col-sm-2 control-label">合作机构：</label>
            <div class="col-md-8 col-sm-10">
              <select class="form-control"
                      v-model="params.agentOrgId">
                <option value="">全部</option>
                <option v-for="c in companyList"
                        :value="c.agentCompany">{{c.agentCompanyName}}</option>
              </select>
            </div>
          </div>
        </div>

      </div>
      <div class="col-md-6 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">佣金状态：</label>
            <div class="col-md-8 col-sm-10"
                 style="width:73%">
              <select class="form-control"
                      v-model="params.commissionStatus">
                <option value="">全部</option>
                <option v-for="(val, key) in commissionStateList"
                        :value="key">{{val}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label for=""
                   class="col-md-3 col-sm-2 control-label"></label>
            <div class="col-md-8 col-sm-10">
              <button class="btn btn-theme"
                      @click="getCommissionList"
                      style="color: white;">查询</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table-responsive report-table">
      <table class="table table-striped table-bordered min-width-1218"
             style="min-width: 1230px;max-width: 2000px;width: 100%">
        <thead>
          <tr>
            <td width="5%">序号</td>
            <td width="13%">项目</td>
            <td width="13%">合作机构名称</td>
            <td width="5%">成交房间套数</td>
            <td width="7%">成交总金额</td>
            <td width="15%">结算周期</td>
            <td width="5%">佣金状态</td>
            <td width="7%">待结算日期</td>
            <td width="5%">待结算佣金</td>
            <td width="7%">实际结佣日期</td>
            <td width="8%">实际结算佣金</td>
            <td width="10%">操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row,index) in commissionList">
            <td>{{(params.pageNo-1)*params.pageSize+index+1}}</td>
            <td>{{row.premisesName}}</td>
            <td>{{row.agentCompanyName}}</td>
            <td>{{row.dealNum}}</td>
            <td>{{row.dealAmount}}</td>
            <td>{{row.settlementCycle}}</td>
            <td>{{row.commissionStatus}}</td>
            <td>{{row.pendingDateStr}}</td>
            <td>{{row.pendingCommission}}</td>
            <td>{{row.actualDateStr}}</td>
            <td>{{row.actualCommission}}</td>
            <td style="vertical-align: middle;">
              <button class="btn btn-theme"
                      v-if="row.pendingBtn=='1'"
                      @click="showSettlement(row.id,row.pendingCommission)"
                      v-res="{code:'menu_0006_0002_0001'}">结佣</button>
              <button class="btn btn-theme"
                      @click="showDetail(row.id)"
                      v-res="{code:'menu_0006_0002_0002'}">查看</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="laypage_org_commission"></div>
    <SettlementModal v-bind:settlementCommission="settlementCommission"
                     v-on:initCommissionList="initCommissionList"></SettlementModal>
  </div>
</template>

<script>
import SettlementModal from "./settlementCommission.vue";
export default {
  data() {
    return {
      params: {
        pageSize: 10,
        pageNo: 1,
        commissionStatus: "",
        premisesId: "",
        agentOrgId: "",
      },
      premisesList: [],
      commissionStateList: [],
      companyList: [],
      commissionList: [],
      settlementCommission: {
        commissionId: "",
        pendingCommission: "",
      },
    };
  },
  components: {
    SettlementModal,
  },
  mounted: function () {
    this.getPremiseList();
    this.getCommissionStatusList();
    this.getCompanyList();
    this.getCommissionList();
  },
  methods: {
    //楼盘
    getPremiseList: function () {
      var _self = this;
      var url = _self.utilHelper.apiUrl + "/api/getPremisesForRule";
      var body = {};
      body.params = {};
      _self.$http.post(url, body).then((response) => {
        if (response.body.result == "1") {
          this.premisesList = response.body.resData.list;
        }
      });
    },
    //佣金状态
    getCommissionStatusList: function () {
      var _self = this;
      var url =
        _self.utilHelper.apiUrl + "/common/getEnum/CommissionStatusEnum";
      _self.$http.get(url).then((response) => {
        this.commissionStateList = response.body.data;
      });
    },
    //获取合作机构
    getCompanyList: function () {
      var _self = this;
      var body = {};
      body.params = {};
      var url = _self.utilHelper.apiUrl + "/api/getAgentOrgByDevOrg";
      _self.$http.post(url, body).then((response) => {
        if (response.body.result == "1") {
          this.companyList = response.body.resData.agentOrgList;
        } else {
          layer.msg("查询条件初始化失败");
        }
      });
    },
    //获取佣金列表
    getCommissionList: function () {
      var _self = this;
      var body = {};
      body.params = this.params;
      var url = _self.utilHelper.apiUrl + "/api/getOrgCommissionPage";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == "1") {
          _self.commissionList = body.resData.page.rows;
          var current = body.resData.page.pageNumber;
          var total = body.resData.page.total;
          var totalPages = body.resData.page.totalPages;
          if (totalPages >= 0) {
            layui.laypage.render({
              elem: $("#laypage_org_commission"), //容器。值支持id名、原生dom对象，jquery对象,
              limit: _self.params.pageSize,
              curr: current,
              count: total,
              theme: "#f87242;", //皮肤
              first: "首页", //若不显示，设置false即可
              last: "尾页", //若不显示，设置false即可
              prev: "上一页", //若不显示，设置false即可
              next: "下一页", //若不显示，设置false即可
              layout: ["prev", "page", "next", "skip", "count"],
              jump: function (obj, first) {
                if (!first) {
                  _self.params.pageNo = obj.curr;
                  _self.getCommissionList();
                }
              },
            });
          }
        }
      });
    },
    //结佣
    showSettlement: function (id, pendingCommission) {
      var _self = this;
      _self.settlementCommission.commissionId = id;
      _self.settlementCommission.pendingCommission = pendingCommission;
      $("#settlementModal").modal("show");
    },
    showDetail: function (id) {
      this.$router.push({
        name: "orgCommissionDetail",
        params: { id: id },
      });
    },
    initCommissionList: function () {
      this.getCommissionList();
    },
  },
};
</script>